<template>
  <div class="personal-center">
    <!-- 头部展示 -->
    <div class="info-top-title">
      <div>
        <span class="myInfo">个人中心</span
        ><span class="english"> Personal Center</span>
        <span class="asd"></span>
      </div>
    </div>
    <!-- 我的信息展示 -->
    <div class="show-user-info">
      <div class="form-group">
        <div class="group-name animate__animated animate__fadeInLeft">绑定邮箱</div>
        <div class="group-input animate__animated animate__fadeInRight">
          <div class="form-text" v-show="!showEmail">
            您还未绑定邮箱，点击  <router-link to="/personal/infoCompletion"> 这里 </router-link> 进行绑定。
          </div>
           <div v-show="showEmail" class="form-text">
             {{showEmail}}
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="group-name animate__animated animate__fadeInLeft">绑定手机</div>
        <div class="group-input animate__animated animate__fadeInRight">
          <div class="form-text" v-show="!showPhone" >
            您还未绑定手机，点击  <router-link to="/personal/infoCompletion"> 这里 </router-link> 进行绑定。
          </div>
           <div v-show="showPhone" class="form-text" style="display:none">
           {{showPhone}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalCenter",
  data() {
    return {
      showEmail:"",
      showPhone:""

    }
  },
  mounted(){
    this.getStoreUserInfo()
  },
  methods:{
    //获取登录用户的数据
      getStoreUserInfo(){
          const userInfo = this.$store.state.userInfo
          console.log(userInfo);
          this.showEmail = userInfo.userEmail
          this.showPhone = userInfo.userPhoneNumber
      }
  }
};
</script>

<style scoped>
.personal-center {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
  color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.form-group {
  display: flex;
  margin-bottom: 20px;
}
.form-group .group-name  {
  width: 8%;
  margin-left: 70px;
  color: #2882c5;
  font-weight: 600;
  font-size: 16px;
  text-align: right;
  line-height: 39px;
}
.form-group .group-input {
  margin-left: 20px;
  width: 500px;
}
.input-login {
  width: 100%;
}
.submit-info {
  width: 100%;
  height: 71px;
  position: relative;
  /* display: block; */
  top: 20px;
}
.submit-info button {
  position: absolute;
  right: 0;
}
.form-text{
      line-height: 40px;
    font-size: 14px;
    color: #333;
}
</style>